<!DOCTYPE html>
<html lang="en" xmlns="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>商品详情 · Top - 英皇乐理 在线模考平台</title>
    <link rel="shortcut icon" th:href="@{/images/logo.png}">
    <link rel="stylesheet" type="text/css" th:href="@{/layui/css/layui.css}">
    <link rel="stylesheet" type="text/css" th:href="@{/css/all.css}">
    <link rel="stylesheet" type="text/css" th:href="@{/css/main.css}">
    <link rel="stylesheet" type="text/css" th:href="@{/css/submit.css}">
    <script type="text/javascript" th:src="@{/js/jquery-3.3.1.min.js}"></script>
    <script type="text/javascript" th:src="@{/layui/layui.js}"></script>
    <script type="text/javascript" th:src="@{/js/commons.js}"></script>
    <script type="text/javascript" th:src="@{/js/api.js}"></script>
    <script type="text/javascript" th:src="@{/js/submit.js}"></script>
</head>
<body>

<div class="main-div">
    <div class="main-box">
        <div th:replace="~{commons::headerbar(active='productList')}"></div>
        <div class="content position" style="display: flex; justify-content: space-between"></div>
        <div class="cars">
            <div class="available-area">
                <div class="cart-steps">
                    <span class="active">1.我的购物车</span>
                    <span class="active">2.填写订单信息</span>
                    <span class="">3.成功提交订单</span>
                </div>
            </div>
            <div class="width_1200">
                <div class="address">
                    <div class="card-head"><span>收货人信息</span></div>
                    <div class="address-manage">
                        <div class="address-item" th:each="address : ${addressEntities}" th:classappend="${address.isDefault} == 1 ? 'is-default' : ''">
                            <div style="padding: 10px">
                                <div style="color: #0C0C0C">[[${address.receiver}]]</div>
                                <div>[[${address.mobile}]]</div>
                                <div>[[${address.province}]][[${address.city}]][[${address.area}]][[${address.addr}]]</div>
                            </div>
                            <!--模态框-->
                            <div class="model">
                                <div class="box">
                                    <a th:data-id="${address.id}" th:onclick="|editAddress(this.getAttribute('data-id'))|">编辑</a>
                                    <a th:data-id="${address.id}" th:onclick="|changeDefault(this.getAttribute('data-id'))|">设为默认</a>
                                </div>
                            </div>
                        </div>
                        <div class="add-address" th:onclick="addAddress()">
                            添加新地址
                        </div>
                    </div>
                </div>
                <div class="goods-content">
                    <div class="card-head mt_20 mb_20"><span>商品信息</span></div>
                    <div class="goods-msg">
                        <div>
                            <div class="goods-list">
                                <div class="goods-item">
                                    <span class="hover-color"><input type="hidden" id="productId" th:value="${productEntity.id}" />
                                        <img th:src="${productEntity.fileEntities[0].filePath}" alt="">
                                        <span style="vertical-align: top;">[[${productEntity.productName}]]</span>
                                    </span>
                                    <span class="goods-price">￥[[${productEntity.actualPrice}]]</span>
                                    <span>x1</span>
                                    <span class="goods-price">￥[[${productEntity.actualPrice}]]</span>
                                </div>
                            </div>
                            <div class="order-mark">
                                <div>
                                    <textarea placeholder="订单备注" rows="2" maxlength="60"
                                              class="layui-textarea"></textarea>
                                </div>
                                <span style="font-size: 12px; color: rgb(153, 153, 153);">提示：请勿填写有关支付、收货、发票方面的信息</span>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="invoice">
                    <div class="card-head mt_20 mb_20"><span class="relative">发票信息<span
                            class="inv-tips"><i class="ivu-icon ivu-icon-ios-alert-outline"></i>开企业抬头发票须填写纳税人识别号，以免影响报销 </span></span>
                    </div>
                    <div class="inovice-content"><span>个人</span><span>不开发票</span><span>编辑</span></div>
                </div>
                <div class="order-price">
                    <div><span>1件商品，总商品金额：</span><span>￥[[${productEntity.actualPrice}]]</span></div>
                    <div><span>应付金额：</span><span class="actrual-price">￥[[${productEntity.actualPrice}]]</span>
                        <input type="hidden" id="hidden_price" th:value="${productEntity.actualPrice}" />
                    </div>
                </div>
                <div class="submit-order">
                    <span style="color: red; font-weight: 700"><i class="layui-icon layui-icon-tips"></i>注意：必须选择一个默认邮寄地址。</span>
                    <input type="hidden" id="hidden_car" th:value="${carId}" />
                    <button type="button" class="layui-btn layui-btn-danger" th:onclick="createOrder()">提交订单</button>
                </div>
            </div>
        </div>
    </div>
    <div th:replace="~{commons::footerbar}"></div>
</div>
<!--添加地址-->
<script type="text/html" id="add-address">
    <div class="layui-form add-address-box">
        <form class="layui-form">
            <div class="layui-form-item">
                <label class="layui-form-label">收件人姓名</label>
                <div class="layui-input-block">
                    <input type="text" id="stuName" placeholder="请输入收件人姓名" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">所在地址</label>
                <div class="layui-input-inline">
                    <select name="province" id="province" lay-filter="province">
                    </select>
                </div>
                <div class="layui-input-inline">
                    <select name="city" id="city" lay-filter="city">
                    </select>
                </div>
                <div class="layui-input-inline" style="margin-right: 0">
                    <select name="area" id="area" lay-filter="area">
                    </select>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">详细地址</label>
                <div class="layui-input-block">
                    <input type="text" id="addr" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">手机号码</label>
                <div class="layui-input-block">
                    <input type="tel" id="stuMobile" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-input-block">
                    <button type="button" class="layui-btn" th:onclick="saveAddress()">立即提交</button>
                </div>
            </div>
        </form>
    </div>
</script>
<!--编辑地址-->
<script type="text/html" id="edit-address">
    <div class="layui-form add-address-box">
        <form class="layui-form">
            <div class="layui-form-item">
                <label class="layui-form-label">收件人姓名</label>
                <div class="layui-input-block">
                    <input type="text" id="edit_stuName" placeholder="请输入收件人姓名" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">所在地址</label>
                <div class="layui-input-inline">
                    <select name="province" id="edit_province" lay-filter="edit_province">
                    </select>
                </div>
                <div class="layui-input-inline">
                    <select name="city" id="edit_city" lay-filter="edit_city">
                    </select>
                </div>
                <div class="layui-input-inline" style="margin-right: 0">
                    <select name="area" id="edit_area" lay-filter="edit_area">
                    </select>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">详细地址</label>
                <div class="layui-input-block">
                    <input type="text" id="edit_addr" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">手机号码</label>
                <div class="layui-input-block">
                    <input type="tel" id="edit_stuMobile" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-input-block">
                    <button type="button" class="layui-btn" th:onclick="saveUpdateAddress()">立即提交</button>
                    <input type="hidden" id="hidden_id" />
                    <button type="button" class="layui-btn layui-btn-danger" th:onclick="deleteSingle()">删除</button>
                </div>
            </div>
        </form>
    </div>
</script>
</body>
</html>